<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文体会堂预约信息管理系统</title>
    <!-- 引入vue element 使用所需jar包 -->
    <link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/indexBackgroundContain.css">
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/element-ui/lib/index.js"></script>
    <link rel="icon" href="../img/favicon.ico" type="image/x-icon">
</head>
<style>
    /* 布局样式 */
    .main-content {
        display: flex;
        flex-direction: column;
        height: 800px; /* 让整个内容占满视口高度 */
        background-image: url('../img/background5.jpg'); /* 替换为你的背景图片路径 */
        background-size: cover; /* 图片铺满容器 */
        background-position: center center; /* 居中显示图片 */
        background-repeat: no-repeat; /* 防止图片重复 */
        color: #333; /* 确保文字颜色在背景上清晰可见 */
    }
    .title-section {
        text-align: center;
        background-color: rgba(243, 244, 246, 0.5); /* 半透明背景 */
        padding: 10px 0;
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }
    .content-section {
        flex: 1;
        display: flex;
        background-color: rgba(255, 255, 255, 0.5); /* 半透明背景，提升内容可读性 */
    }
    .left-content,
    .right-content {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        border: 1px solid #e0e0e0;
    }
    .left-content {
        background-color: rgba(224, 226, 229, 0.5); /* 半透明背景 */
        border-right: none;
    }
    .right-content {
        background-color: rgba(231, 236, 241, 0.5); /* 半透明背景 */
    }
</style>
<body>
<div id="app">
    <div class="header">
        <img src="../img/logo1.png" alt="学校logo" class="logo"> <!-- 左侧logo图片 -->
        <span class="headerPlaceholder"></span>
        <h2 class="textH2">文体会堂预约信息管理系统界面</h2>
    </div>
    <div class="container">
        <div class="sidebar">
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'loginIndex' }"
                 @click="selectPage('loginIndex')">主界面</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'noticeManage' }"
                 @click="selectPage('noticeManage')">公告管理</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'placeManage' }"
                 @click="selectPage('placeManage')">场地管理</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'placeSubscribe' }"
                 @click="selectPage('placeSubscribe')">预约场地</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'alreadySubscribe' }"
                 @click="selectPage('alreadySubscribe')">已预约信息</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'subscribeHistory' }"
                 @click="selectPage('subscribeHistory')">预约历史</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'usersManage' }"
                 @click="selectPage('usersManage')">用户信息管理</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'myInfo' }"
                 @click="selectPage('myInfo')">我的信息</div>
        </div>

        <div class="main-content">
            <!-- 标题部分 -->
            <div class="title-section">
                系统操作指南
            </div>

            <!-- 内容部分 -->
            <div class="content-section">
                <!-- 左半部分 (管理员功能) -->
                <div class="left-content">
                    <h4>管理员功能</h4>
                    <ul>
                        <li><strong>公告管理：</strong>添加、修改、删除公告。</li>
                        <li><strong>场地管理：</strong>增加、删除、修改场地信息。</li>
                        <li><strong>用户管理：</strong>查看、增加、删除、修改用户信息。</li>
                        <li><strong>预约管理：</strong>审批场地和器材预约信息。</li>
                    </ul>
                    <h4>个人信息管理</h4>
                    <ul>
                        <li><strong>查看个人信息：</strong>登录后自动显示。</li>
                        <li><strong>修改个人信息：</strong>更新联系方式或密码。</li>
                    </ul>
                </div>

                <!-- 右半部分 (普通用户功能) -->
                <div class="right-content">
                    <h4>普通用户功能</h4>
                    <ul>
                        <li><strong>场地预约：</strong>浏览场地信息，选择时间段进行预约。</li>
                        <li><strong>预约管理：</strong>查看已预约的场地信息，取消预约。</li>
                        <li><strong>预约历史：</strong>查看历史预约记录。</li>
                        <li><strong>个人信息：</strong>查看和修改个人信息。</li>
                    </ul>
                    <h4>注意事项</h4>
                    <ul>
                        <li>使用推荐浏览器以获得最佳体验。</li>
                        <li>请妥善保管账户密码。</li>
                        <li>如遇问题，请联系管理员处理。</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                currentPage: ''
            };
        },
        methods: {
            selectPage(page) {
                this.currentPage = page; // 设置当前页面标记
                localStorage.setItem('currentPage', page); // 保存当前模块到 localStorage
                const nextUrl = "/pages/" + page + ".html";

                window.location.href = nextUrl; // 页面跳转
            }
        },
        mounted() {
            const savedPage = localStorage.getItem('currentPage');
            if (savedPage) {
                this.currentPage = savedPage; // 恢复选中的模块
            } else {
                this.currentPage = 'loginIndex'; // 默认模块
            }
        }
    });
</script>
</body>
</html>
